<template>
<div id="app">
  <nav-bar title="退款详情" left-arrow @clickLeft="$goPageBack('order/list')" />

  <refund-detail-list :list="list" v-if="list" />
  <refund-detail-pnl :data="data" v-else-if="data" />
  <no-data :text="errMsg" v-else-if="!isOnLoading" />
  <slogan />
</div>
</template>

<script>
import {
  Toast,
} from 'vant'

import NavBar from "@cmpt/header/navbar"
import RefundDetailList from '@views/order/refund/components/list'
import RefundDetailPnl from '@views/order/refund/components/detail'
import NoData from '@cmpt/no-data'
import Slogan from '@cmpt/slogan'

import {
  getRefundList,
} from "@api/modules/order"
import {
  getErrInfo,
} from "@api/http"

export default {
  name: 'refund-list',
  components: {
    NavBar,
    RefundDetailList,
    RefundDetailPnl,
    NoData,
    Slogan,
  },

  data() {
    return {
      order_no: this.$getUrlParam('order_no') || '',
      sku_id: this.$getUrlParam('sku_id') || '',
      id: this.$getUrlParam('id') || '',
      list: null,
      data: null,
      errMsg: '',
      isOnLoading: false,
    }
  },

  computed: {},

  methods: {
    async getData() {
      this.isOnLoading = true
      Toast.loading({
        duration: 10000,
        forbidClick: true
      })
      getRefundList({
        order_no: this.order_no,
        sku_id: this.sku_id,
      }).then(res => {
        this.isOnLoading = false
        Toast.clear()

        const data = res.data
        this.list = null
        this.data = null
        if (data.length > 1) {
          this.list = data
        }
        else if (data.length = 1) {
          this.data = data[0]
        }
      }).catch(err => {
        this.list = null
        this.data = null
        const {
          msg
        } = getErrInfo(err)
        this.errMsg = msg
        this.isOnLoading = false
      })
    },
  },

  created() {
    this.getData()
  },

}
</script>
